<template>
  <div class="mainpage-container">
    <el-card class="box-card-component" style="margin-left: 8px">
      <div class="box-card-header">
        <img :src="require('@/assets/images/school.jpg')" />
      </div>
      <div class="form-container">
        <el-form
          ref="userData"
          :model="userData"
          label-width="120px"
          style="margin-top: 60px"
        >
          <el-form-item :label="userDataRemark.username">
            <el-input v-model="userData.username" />
          </el-form-item>
          <el-form-item :label="userDataRemark.sex">
            <el-input v-model="userData.sex" />
          </el-form-item>
          <el-form-item :label="userDataRemark.role">
            <el-input v-model="userData.role" />
          </el-form-item>
          <el-form-item :label="userDataRemark.roleDescription">
            <el-input v-model="userData.roleDescription" />
          </el-form-item>
        </el-form>
      </div>
    </el-card>
    <div class="accounts-container">
      <accountCard
        :accountData="account"
        v-for="account in userData.accounts"
        :key="account.id"
      ></accountCard>
    </div>
  </div>
</template>

<script>
import accountCard from "./account/index.vue";

export default {
  name: "ok",
  computed: {},
  components: {
    accountCard,
  },
  data() {
    return {
      userData: {
        userId: "",
        username: "",
        sex: "",
        headPortrait: "",
        phoneNumber: "",
        role: "",
        roleDescription: "",
        accounts: {
          id: "123",
          money: "100",
        },
      },
      userDataRemark: {
        userId: "",
        username: "用户名",
        sex: "性别",
        headPortrait: "头像",
        phoneNumber: "手机号",
        role: "角色",
        roleDescription: "角色描述",
      },
    };
  },
  created() {
    this.userData = this.$store
      .dispatch("request/get", "/user/mainpage")
      .then((data) => {
        this.userData = data;
      });
  },
};
</script>

<style lang="scss" scoped>
.mainpage-container {
  &-container {
    margin: 30px;
  }
  &-text {
    font-size: 30px;
    line-height: 46px;
  }
  height: 100%;
  width: 100%;
}

img {
  width: 100%;
  height: 100%;
  transition: all 0.2s linear;

  &:hover {
    transform: scale(1.1, 1.1);
    filter: contrast(130%);
  }
}
.box-card-component {
  width: 100%;
}
.box-card-header {
  position: relative;
  height: 220px;
}
.accounts-container {
  // height: 100%;
  // width: 100%;
  display: flex;
  justify-content: flex-start;
}
.form-container {
  height: 100%;
  width: 100%;
  display: flex;
  justify-content: center;
}
</style>